<script setup lang="ts">
import { ProjectForm } from '@/api/exam/project/types';
import { listAnswer } from '@/api/exam/answer';
import { AnswerVO } from '@/api/exam/answer/types';
import { QuestionType } from '@/api/exam/template/types';
import { QUESTION_TYPE_CONFIG } from '@/views/exam/template/info/config';
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts';
import AnswerChart from '@/views/exam/project/info/chart/answerChart.vue';
import ScoreChart from '@/views/exam/project/info/chart/scoreChart.vue';

interface Props {
  projectForm: any | ProjectForm;
}

const props = withDefaults(defineProps<Props>(), {
  projectForm: {
    survey: {
      children: []
    }
  }
});
const projectForm = ref<ProjectForm>(props.projectForm);
watch(() => props.projectForm, () => {
  projectForm.value = props.projectForm;
});
const segmentedValue = ref('');
const segmentedData = ref([
  { value: 'answer', label: '答案分析', icon: 'icon-chart-line' },
  { value: 'score', label: '分数分析', icon: 'icon-chart-pie' }
]);
const answerList = ref<AnswerVO[]>([]);
const queryParams = ref<any>({
  projectId: projectForm.value.id,
  tempSave: '1'
});
const getAnswerList = async () => {
  const res = await listAnswer(queryParams.value);
  answerList.value = res.data;
};


onMounted(async () => {
  await getAnswerList();
  setTimeout(() => {
    segmentedValue.value = 'answer';
  },50);
});
</script>

<template>
  <a-flex vertical gap="middle" style="flex: 1;overflow-y: auto;padding: 0 40px">
    <a-card hoverable>
      <a-segmented v-model:value="segmentedValue" :options="segmentedData" />
      <div class="p-2" v-if="segmentedValue === 'answer'">
        <answer-chart :segmented-value="segmentedValue" :answer-list="answerList" :project-form="projectForm" />
      </div>
      <div class="p-2" v-if="segmentedValue === 'score'">
        <score-chart  :segmented-value="segmentedValue" :answer-list="answerList" :project-form="projectForm" />
      </div>
    </a-card>
  </a-flex>
</template>

<style scoped lang="scss">
.score-section {
  margin: 24px 0;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-container {
  margin: 24px 0;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

h3 {
  margin-bottom: 16px;
  color: #666;
  font-size: 16px;
}
</style>
